<template>
    <div class="GainZyCoin">
        <div class="zYbottom">
            <div class="zYbottomList">
                <div class="left">
                    <h2>签到 <span>+5</span></h2>
                    <p>每日签到得5至游币，连续签到7天后得10至游币</p>
                </div>
                <div class="right">
                    <button disabled>已签到</button>
                </div>
            </div>
            <div class="zYbottomList">
                <div class="left">
                    <h2>分享 <span>+2</span></h2>
                    <p>分享可得2至游币，每日上限10至游币</p>
                </div>
                <div class="right">
                    <button>去分享</button>
                </div>
            </div>
            <div class="zYbottomList">
                <div class="left">
                    <h2>发布文章 <span>+5</span></h2>
                    <p>每日发布文章得5至游币，上限20至游币</p>
                </div>
                <div class="right">
                    <button>去发布</button>
                </div>
            </div>
            <div class="zYbottomList">
                <div class="left">
                    <h2>点赞 <span>+1</span></h2>
                    <p>每日点赞得1至游币，上限10至游币</p>
                </div>
                <div class="right">
                    <button>去点赞</button>
                </div>
            </div>
            <div class="zYbottomList">
                <div class="left" style="line-height: 48px;">
                    <h2>完善资料 <span>+10</span></h2>
                </div>
                <div class="right">
                    <button disabled>已完善</button>
                </div>
            </div>
            <div class="zYbottomList">
                <div class="left" style="line-height: 48px;">
                    <h2>身份认证 <span>+20</span></h2>
                </div>
                <div class="right">
                    <button>认证</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {};
</script>
<style>
    .zYbottom {
        width: 100%;
        height: 576px;
        background: white;
    }

    .zYbottom > .zYbottomList {
        height: 96px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }

    .zYbottomList:nth-child(odd) {
    }

    .zYbottomList > .left {
        width: 75%;
        height: 100%;
        padding-left: 26px;
    }

    .zYbottomList > .left > h2 {
        font-weight: normal;
        font-size: 30px;
    }

    .zYbottomList > .left > h2 > span {
        font-size: 24px;
        color: #f77754;
    }

    .zYbottomList > .left > p {
        font-size: 24px;
        color: #999999;
    }

    .zYbottomList > .right {
        width: 25%;
        height: 100%;
        position: relative;
    }

    .zYbottomList > .right > button[disabled] {
        background: #d4d4d4;
    }

    .zYbottomList > .right > button {
        width: 108px;
        height: 48px;
        border-radius: 30px;
        border: none;
        color: white;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #ec9b38;
    }

    .bottom> div > a {
        color: white;
    }
</style>
